﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Digital I/O</title>
  
  
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css"/>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="x2j.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
<script type="text/javascript" src="sprintf.js"></script>
<script type="text/javascript" src="soap-jqt.js"></script>

<script type="text/javascript">
    var jQT = $.jQTouch({
        //icon: 'kilo.png',
        statusBar: 'black'
    });
</script>

    </head>
    <body>
        <div id="home">
            <div class="toolbar">
                <h1>i.Lon SS 2.0</h1>
                <a class="button flip" href="#settings">Settings</a>
            </div>
            <ul class="edgetoedge">
                <li class="arrow"><a id="DIs" href="#dio" >Digital I/O</a></li>
            </ul>
        </div>
        <div id="settings">
			<div class="toolbar">
				<h1>i.Lon Settings</h1>
				<a class="button back" href="#">Back</a>
			</div>
			<h2>i.Lon Properties</h2>
			<form>
				<ul><!-- 85.62.110.22:8080 -->
					<!--li><input type="text" placeholder="IP address" value="192.168.0.222" name="ipAddr" id="ipAddr" 
					autocapitalize="off" autocorrect="off" autocomplete="off" /></li-->
					<li><input type="text" placeholder="username" value="ilon" name="username" id="username" 
					autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
					<li><input type="password" placeholder="password" value="ilon" name="pwd" id="pwd" 
					autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
				</ul>
			</form>
			<h2>Refresh every</h2>
			<form>
				<ul>
					<!--li>
						<input type="text" placeholder="refresh every n seconds" value="2" name="refreshFreq" id="refreshFreq" 
					autocapitalize="off" autocorrect="off" autocomplete="off" />
					</li-->
					<li>
						<select id="refreshFreq">
                            <optgroup label="Refresh every">
                                <option value="1000">1 second</option>
                                <option value="2000" selected="selected">2 seconds</option>
                                <option value="3000">3 seconds</option>
                                <option value="4000">4 seconds</option>
                                <option value="5000">5 seconds</option>
                            </optgroup>
						</select>
                    </li>
				</ul>
			</form>
		</div>
        <div id="dio">
            <div class="toolbar">
                <h1>Digital I/O</h1>
                <a class="button back" href="#" id="DIBack">Back</a>
            </div>
			<h2>Digital Outputs (tap to change)</h2>			
		    <form>
				<ul>
					<li>DO-1
						<select class="toggle do1value">
                       	    <optgroup>
                                <option value="ON">ON</option>
                                <option value="OFF">OFF</option>
                                <option value="HALF">HALF</option>
								<!-- the display:none only works in firefox (3.56) not in safari! -->
 								<option value="Hidden" style="display:none;" disabled="disabled"></option>
                            </optgroup>
						</select>
					</li>
					<li>
						DO-2<span class="toggle"><input type="checkbox" class="do2value" /></span> 
						<select class="toggle do2value">
                       	    <optgroup>
                                <option value="ON">ON</option>
                                <option value="OFF">OFF</option>
								<option value="Hidden" style="display:none;" disabled="disabled"></option>
                            </optgroup>
						</select>
					</li>
				</ul>
			</form>
			<h2>Digital Inputs (read only)</h2>
            <form>
				<ul>
					<li>
						DI-1<span class="toggle"><input type="checkbox" class="di1value" disabled="disabled"/></span> 
					</li>
					<li>
						DI-2<span class="toggle"><input type="checkbox" class="di2value" disabled="disabled"/></span> 
					</li>
				</ul>
			</form>
        </div>
    </body>
</html>